<template>
    <div class="comment-page">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>评论区</span>
          </div>
        </template>
        <div v-for="(comment, index) in comments" :key="index" class="comment-item">
          <el-row :gutter="20">
            <el-col :span="3">
              <el-avatar :size="50" :src="comment.avatar" />
            </el-col>
            <el-col :span="21">
              <div class="comment-content">
                <div class="comment-author">{{ comment.author }}</div>
                <div class="comment-date">{{ comment.date }}</div>
                <div class="comment-text">{{ comment.text }}</div>
              </div>
            </el-col>
          </el-row>
          <el-divider />
        </div>
      </el-card>
  
      <el-card class="add-comment-card">
        <template #header>
          <div class="card-header">
            <span>添加评论</span>
          </div>
        </template>
        <el-form :model="form" label-position="top">
          <el-form-item label="用户名">
            <el-input v-model="form.author" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="评论内容">
            <el-input v-model="form.text" type="textarea" placeholder="请输入评论内容" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addComment">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <el-pagination
        layout="prev, pager, next"
        :total="totalComments"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
      />
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import axios from 'axios';
  
  export default {
    setup() {
      const comments = ref([]);
      const form = ref({
        author: '',
        text: ''
      });
      const totalComments = ref(0);
      const pageSize = ref(5);
      const currentPage = ref(1);
  
      const fetchComments = async () => {
        try {
          const response = await axios.get('/api/comments'); // 替换为实际的API地址
          comments.value = response.data.comments;
          totalComments.value = response.data.total;
        } catch (error) {
          ElMessage.error('加载评论失败，请稍后再试');
        }
      };
  
      const addComment = async () => {
        if (!form.value.author || !form.value.text) {
          ElMessage.error('请填写完整信息');
          return;
        }
  
        try {
          const response = await axios.post('/api/comments', {
            author: form.value.author,
            text: form.value.text
          });
          comments.value.push(response.data.comment);
          form.value.author = '';
          form.value.text = '';
          totalComments.value++;
        } catch (error) {
          ElMessage.error('添加评论失败，请稍后再试');
        }
      };
  
      const handlePageChange = (newPage) => {
        currentPage.value = newPage;
        // 这里可以添加分页逻辑，例如从服务器获取新的评论数据
        fetchComments();
      };
  
      onMounted(() => {
        fetchComments();
      });
  
      return {
        comments,
        form,
        totalComments,
        pageSize,
        currentPage,
        addComment,
        handlePageChange
      };
    }
  };
  </script>
  
  <style scoped>
  .comment-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(173, 228, 183, 0.137);
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1050px;

  }
  
  .comment-item {
    margin-bottom: 20px;
  }
  
  .comment-author {
    font-weight: bold;
    font-size: 16px;

  }
  
  .comment-date {
    color: #999;
    font-size: 14px;
  }
  
  .comment-text {
    margin-top: 10px;
    line-height: 1.5;
    color: #333;
  }
  
  .add-comment-card {
    margin-top: 20px;
    background-color: rgba(173, 228, 183, 0.137);
  }
  
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
  </style>
  